<template>
  <div>
    <div class="header">
      <!--    -->
      <ul>
        <!--  <li> {{$store.state.userName}}</li> -->
        <li v-if="this.$store.state.userName.userName">
          欢迎<span @click="loginOut">{{ $store.state.userName.userName }}</span>
        </li>
        <li v-show="!this.$store.state.userName.userName">
          <router-link to="" @click.native="doLogin">登录</router-link>
          <span>|</span>
          <router-link to="" @click.native="signUp">注册</router-link>
          <!-- <span ></span> -->
        </li>
        <li>
          <router-link to="/order" @click.native="collect">我的订单</router-link>
        </li>
        <li>
          <router-link to="/collect" @click.native="collect">
          我的收藏
          </router-link>
        </li>
        <li>
          <router-link to="/cart" @click.native="collect">
            <i class="el-icon-shopping-cart-full"></i>
            购物车 (0)
          </router-link>
        </li>
      </ul>
    </div>
    <DialogName ref="dialo"></DialogName>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: [], //接收父组件传过来的值
  methods: {
    /* 注册 */
    signUp() {
      // console.log(this.$refs.dialo);
      this.$refs.dialo.showDialog();
    },
    // 登录
    doLogin() {
      console.log(this.$refs.dialo);
      this.$refs.dialo.loginDialog();
    },
    /* 我的收藏 */
    collect(){
       if (!this.$store.state.userName) {
        this.$refs.dialo.loginDialog();
    } 
    
    },
    /* 退出登录 */
    loginOut() {
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$notify({
            title: "确定退出吗？",
            message: "退出成功",
            type: "success",
          });
           this.$store.commit('loginOut')
        /*   this.$store.state.userName='' */
        })
        .catch(() => {
           this.$notify({
            message: "退出失败",
            type: "error",
          });
        });
    },
    /*  this.$store.state.userName='' */
  },
};
</script>

<style lang='scss'scoped>
.header {
  /*   width: 100%; */
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;

  ul {
    display: flex;
    justify-content: flex-end;
    margin-right: 70px;
    li {
      list-style: none;
      line-height: 40px;
      border-radius: 0%;
      padding: 0%;
      cursor: pointer;
      color: #b0b0b0;
      span {
        margin-right: 10px;
        color: #b0b0b0;
      }
      span:hover {
        color: white;
      }
      a {
        color: #b0b0b0;
        margin-right: 20px;
        margin-left: 10px;
        text-decoration: none;
      }
      a:hover {
        color: white;
      }
      .el-button {
        width: 100%;
        border-radius: 0%;
        margin-right: 40px;
        /*  padding-right: 30px;
           padding-left: 30px; */
        background: #424242;
        color: #b0b0b0;
        border: none;
      }
      .el-button:hover {
        background: white;
        color: orangered;
      }
    }
    li:nth-child(4) {
      width: 120px;
      /* margin-top: -0px; */
      padding-top: 0;
      text-align: center;
    }
  }
}
</style>